.box-sizing() {
    box-sizing: border-box;
}

.setHeight(@h: 50px) {
    height: @h;
    line-height: @h;
}

.textOverflow() {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.removeLeftOrTopLine() {
    &:before {
        display: none;
    }
}

.removeRightOrBottomLine() {
    &:after {
        display: none;
    }
}

@svg-right: '<svg width="16" height="26" viewBox="0 0 16 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="UI-KIT_基础元件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="9.9基础元件" transform="translate(-5809.000000, -8482.000000)" fill="#C7C7CC"><polygon id="Disclosure-Indicator" points="5811 8482 5809 8484 5820.5 8495 5809 8506 5811 8508 5825 8495"></polygon></g></g></svg>';
@svg-success: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" width="24" height="24" class="icon" viewBox="0 0 1041 1024"><defs><style/></defs><path fill="#fff" d="M512.687 992.697c265.113 0 480.03-214.918 480.03-480.032S777.8 32.633 512.687 32.633c-265.113 0-480.03 214.918-480.03 480.032s214.917 480.032 480.03 480.032zm0 31.303C229.937 1024 .722 794.785.722 512.033.72 229.28 229.937.066 512.69.066s511.967 229.215 511.967 511.967c0 282.752-229.215 511.967-511.967 511.967z"/><path fill="#fff" d="M755.86 335.116c-8.326-7.808-21.456-7.435-29.263.912L450.41 630.083 299.54 481.43c-8.158-8.037-21.268-7.953-29.303.206-8.036 8.14-7.932 21.27.228 29.284l165.988 163.523c.062.062.145.082.207.145.062.062.082.144.145.207 1.305 1.242 2.88 1.947 4.39 2.775.746.435 1.388 1.077 2.175 1.387 2.443.953 5.032 1.45 7.6 1.45 2.713 0 5.426-.54 7.952-1.616.85-.35 1.512-1.073 2.3-1.53 1.552-.91 3.167-1.677 4.493-3.023.063-.063.083-.166.145-.228.04-.064.125-.084.186-.146l290.702-309.486c7.87-8.303 7.436-21.412-.89-29.26z"/></svg>';
@svg-failure: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" width="24" height="24" class="icon" viewBox="0 0 1024 1024"><defs><style/></defs><path fill="#fff" d="M509.44 1018.88C228.536 1018.88 0 790.354 0 509.44 0 228.536 228.536 0 509.44 0c280.914 0 509.44 228.536 509.44 509.44 0 280.914-228.526 509.44-509.44 509.44zm1.28-984.248c-262.513 0-476.088 213.575-476.088 476.088S248.207 986.808 510.72 986.808 986.808 773.233 986.808 510.72 773.233 34.632 510.72 34.632z"/><path fill="#fff" d="M531.61 509.38l131.38-131.493c7.382-7.383 8.467-18.268 2.436-24.29-6.03-6.03-16.906-4.925-24.29 2.458l-131.41 131.512-132.003-131.553c-7.393-7.373-18.28-8.448-24.3-2.406-6.02 6.04-4.905 16.916 2.49 24.29l131.98 131.522-131.05 131.174c-7.384 7.383-8.47 18.268-2.44 24.29 6.034 6.03 16.91 4.925 24.29-2.458L509.78 531.22l131.05 130.6c7.395 7.374 18.28 8.45 24.3 2.408 6.022-6.042 4.906-16.917-2.487-24.29L531.61 509.38z"/></svg>';
@svg-unfold: '<svg t="1533030175258"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4989" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 743.38L72 380.52a23.5 23.5 0 1 1 30-36.26l410.19 338.36 410-333.82a23.5 23.5 0 0 1 29.68 36.45z" fill="#323333" p-id="4990"></path></svg>';
@svg-spinner-dark: '<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><line id="l" x1="60" x2="60" y1="7" y2="27" stroke="#6c6c6c" stroke-width="11" stroke-linecap="round"/></defs><g><use xlink:href="#l" opacity=".27"/><use xlink:href="#l" opacity=".27" transform="rotate(30 60,60)"/><use xlink:href="#l" opacity=".27" transform="rotate(60 60,60)"/><use xlink:href="#l" opacity=".27" transform="rotate(90 60,60)"/><use xlink:href="#l" opacity=".27" transform="rotate(120 60,60)"/><use xlink:href="#l" opacity=".27" transform="rotate(150 60,60)"/><use xlink:href="#l" opacity=".37" transform="rotate(180 60,60)"/><use xlink:href="#l" opacity=".46" transform="rotate(210 60,60)"/><use xlink:href="#l" opacity=".56" transform="rotate(240 60,60)"/><use xlink:href="#l" opacity=".66" transform="rotate(270 60,60)"/><use xlink:href="#l" opacity=".75" transform="rotate(300 60,60)"/><use xlink:href="#l" opacity=".85" transform="rotate(330 60,60)"/></g></svg>';
@svg-spinner-light: '<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><line id="l" x1="60" x2="60" y1="7" y2="27" stroke="#fff" stroke-width="11" stroke-linecap="round"/></defs><g><use xlink:href="#l" opacity=".27"/><use xlink:href="#l" opacity=".27" transform="rotate(30 60,60)"/><use xlink:href="#l" opacity=".27" transform="rotate(60 60,60)"/><use xlink:href="#l" opacity=".27" transform="rotate(90 60,60)"/><use xlink:href="#l" opacity=".27" transform="rotate(120 60,60)"/><use xlink:href="#l" opacity=".27" transform="rotate(150 60,60)"/><use xlink:href="#l" opacity=".37" transform="rotate(180 60,60)"/><use xlink:href="#l" opacity=".46" transform="rotate(210 60,60)"/><use xlink:href="#l" opacity=".56" transform="rotate(240 60,60)"/><use xlink:href="#l" opacity=".66" transform="rotate(270 60,60)"/><use xlink:href="#l" opacity=".75" transform="rotate(300 60,60)"/><use xlink:href="#l" opacity=".85" transform="rotate(330 60,60)"/></g></svg>';
.svg-background-i(@svg) {
    @url: `encodeURIComponent(@{svg}) `;
    background-image: url("data:image/svg+xml;charset=utf-8,@{url}");
}

.svg-background(@svg) when (@svg ='right') {
    .svg-background-i(@svg-right);
}

.svg-background(@svg) when(@svg='success') {
    .svg-background-i(@svg-success);
}

.svg-background(@svg) when(@svg='failure') {
    .svg-background-i(@svg-failure);
}

.svg-background(@svg) when(@svg='unfold') {
    .svg-background-i(@svg-unfold);
}

.svg-background-spinner(@theme) when (@theme ="light") {
    .svg-background-i(@svg-spinner-light);
}

.svg-background-spinner(@theme) when (@theme ="dark") {
    .svg-background-i(@svg-spinner-dark);
}